<style lang="scss" scoped>
.introduce {
  width: 100%;
  height: 100%;
  display: flex;
  z-index: -1;
}
.img_bg {
  width: 100%;
  height: 8%;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  -webkit-filter: blur(1.2rem);
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.detail {
  padding: 15px 26px;
}
.detail_cot{
  display: flex;
}
.content {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding: 10px;
  line-height: 20px;
  position: relative;
}
i {
  // position: absolute;
  // top: 62%;
  // right: 10px;
  display: inline-block;
  font-size: 17px;
}
.City {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  border: 1px solid beige;
  color: #777777;
  padding-top: 7px;
  text-align: center;
}
.whole_city {
  width: 30%;
}
.brand {
  width: 30%;
  border-left: 1px solid #e8e8e8;
}
.characteristic {
  width: 30%;
  border-left: 1px solid #e8e8e8;
}
//影院样式
.list-wrap-list {
  font-size: 14px;
  text-align: left;
  line-height: 25px;
}
.list-wrap-item {
  display: block;
  padding: 13px 15px 13px 0;
  position: relative;
  overflow: hidden;
  margin-left: 15px;
  background-color: #fff;
}
.name {
  display: flex;
}
.distance {
  position: absolute;
  top: 31%;
  right: 0;
}
.showTimes {
  font-size: 12px;
  color: #999;
}
.img_card {
  width: 15px;
  height: 14px;
}
.open_card {
  margin-left: 10px;
}
.addr {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 352px;
}
.Discount {
  color: #f90;
  border: 1px solid #f90;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 0.6rem;
}
.movie_name {
  border: 1px solid skyblue;
  color: skyblue;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 0.6rem;
  margin: 0 6px;
  display: inline-block;
}

.fade-enter-active {
  transition: transform 0.8s;
}
.fade-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.back{
  position: absolute;
  right: 0;
  top: 147px;
  font-size: 30px;
}
</style>

<template>
  <!-- 因template只能有一个根元素,所以用一个Div将template里面的内容进行包裹,这样便使用多个div -->
  <div>
    <transition name="fade">
      <div class="introduce" v-for="(item,index) in list" :key="index">
        <!-- 背景图片 -->
        <div
          class="img_bg"
          v-if="item.img"
          :style="{'backgroundImage': 'url(' + `${item.img.replace('w.h','100.150')}` + ')'}"
        ></div>
        <div class="detail">
          <!-- 图片 -->
          <div class="detail_cot">
            <img :src="[item.img.replace('w.h','100.150')]" class="img_list">
            <!-- 内容 -->
            <div class="content">
              <span>{{item.nm}}</span>
              <div>{{item.enm}}</div>
              <div>{{item.sc}}分</div>
              <div>{{item.cat}}</div>
              <div>{{item.fra}}/{{item.dur}}分钟</div>
              <div>{{item.pubDesc}}</div>
            </div>
            <i class="iconfont icon-youjiantou back" @click="MoviesDetails"></i>
          </div>
        </div>
      </div>
    </transition>
    <!-- 日期 -->
    <div class="Date">
      <h3>This is DateList</h3>
    </div>

    <!-- 电影筛选 -->
    <div class="City">
      <div class="whole_city" @click="whole_city">
        全城
        <i class="iconfont icon-xialajiantou xiala"></i>
      </div>
      <div class="brand">
        品牌
        <i class="iconfont icon-xialajiantou xiala"></i>
      </div>
      <div class="characteristic">
        特色
        <i class="iconfont icon-xialajiantou xiala"></i>
      </div>
    </div>

    <!-- 影院 -->
    <section id="list-wrap">
      <ul class="list-wrap-list" v-infinite-scroll="loadMore">
        <li class="list-wrap-item" v-for="(movie,index) in movie" :key="index" @click="Movies(movie)">
          <!-- 电影院 -->
          <div class="name">
            <h4>{{movie.nm}}</h4>
            <span style="color:#F03D37;margin-left:10px">{{movie.sellPrice}}元起</span>
          </div>
          <!-- 电影院具体信息 -->
          <div class="address clearfix">
            <p class="addr">{{movie.addr}}</p>
          </div>
          <!-- 折扣卡 -->
          <div class="Discount">
            <span>{{movie.tag.vipTag}}</span>
          </div>
          <div class="movie_name">
            <span>{{movieName}}</span>
          </div>
          <!-- 限时促销开卡 -->
          <div class="cardPromotionTag">
            <img src="../assets/card.png" class="img_card">
            <span v-if="movie.promotion.cardPromotionTag" class="open_card"></span>
            <span
              v-if="movie.promotion.cardPromotionTag"
              class="lijian textOverflow1"
            >{{movie.promotion.cardPromotionTag}}</span>
          </div>
          <div class="showTimes">近期场次：{{movie.showTimes}}</div>
          <!-- 影院距离 -->
          <span class="distance">{{movie.distance}}</span>
        </li>
      </ul>
      <!-- loading 加载组件 -->
      <mt-spinner color="rgb(100, 100, 100)" type="fading-circle" class="loading"></mt-spinner>
    </section>
  </div>
</template>


<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
import { constants } from "crypto";
import api from "../utils/api.js";
export default {
  name: "home",
  data() {
    return {
      list: "",
      movie: "",
      movieName: ""
    };
  },
  methods: {
    loadMore() {
      console.log("加载更多");
    },
    // 城市选择
    whole_city() {
      console.log(this);
    },
     Movies(res) {
      //跳转详情
      this.$router.push({
        name: "Movies",
        //接受router传过来的值
        params: {
          id: res.id  
        }
      });
    },

    MoviesDetails(res){
   //
     this.$router.push({
     name: "MoviesDetails",
    //接受router传过来的值
    params: {
    id: res.id  
        }
      });
    }
  },
  created() {
    //电影院筛选
    let filterCinemas_movie = "/filterCinemas";
    this.axios
      .get(filterCinemas_movie, {
        params: {
          movieId: this.$route.params.id
        }
      })
      .then(res => {
        this.item = res.data.brand;
        this.movieName = res.data.service.subItems[1].name;
      });

    //上映院线
    let movie_blueJ = "/movie";
    this.axios
      .post(movie_blueJ, {
        movieId: "1198925",
        day: "2019-6-26",
        offset: 0,
        limit: 20,
        districtId: -1,
        lineId: -1,
        hallType: -1,
        brandId: -1,
        serviceId: -1,
        areaId: -1,
        stationId: -1,
        item: "",
        updateShowDay: true,
        reqId: "1561102080524",
        cityId: 20
      })
      .then(res => {
        // console.log(res.data);
        this.movie = res.data.cinemas;
        // 判断请求结果，如果影院为空，就代表当天无上映，需要再次请求
        if (res.data.cinemas.length !== 0) {
          this.movie = this.movie.concat(res.data.cinemas);
          this.movie = res.data.cinemas;
        } else {
          let day = res.data.showDays.dates[0].date;
          this.post_move(day, 0, this.ciId);
        }
      });

    //电影详情
    let detailmovie_blueJ = "/detailmovie";
    let { url, methods, params } = api.detailmovie;
    this.axios
      .get(detailmovie_blueJ, {
        params: {
          movieId: this.$route.params.id //获取详情数据
        }
      })
      .then(res => {
        this.detailmovie = res.data.detailMovie;
        this.list = res.data;
      })
      .catch(err => {
        console.warn(err);
      });
  },
  
};
</script>
